import 'package:flutter/material.dart';
import '../../core/app_theme.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分类')),
      body: Row(
        children: [
          // 左侧分类导航
          Material(
            // 添加 Material 父组件
            child: Container(
              width: 100,
              decoration: BoxDecoration(
                border: Border(
                  right: BorderSide(color: AppTheme.primaryColor, width: 2),
                ),
                color: Colors.grey[100],
              ),
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      setState(() {
                        selectedIndex = index;
                      });
                    },
                    child: Container(
                      color: index == selectedIndex
                          ? AppTheme.primaryLight
                          : Colors.transparent,
                      padding: EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 8,
                      ),
                      child: Text(
                        '分类 ${index + 1}',
                        style: TextStyle(
                          color: index == selectedIndex
                              ? Colors.white
                              : Colors.black,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          // 右侧商品列表
          Expanded(
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 0.8,
              ),
              itemCount: 15,
              itemBuilder: (context, index) {
                return const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      CircleAvatar(
                        radius: 30,
                        backgroundColor: AppTheme.primaryLight,
                        child: Icon(Icons.category, color: Colors.white),
                      ),
                      SizedBox(height: 8),
                      Text('子分类'),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
